<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./js/swiper.min.css">
    <style>
        /* 在这一行下面写css */
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
            background: url("./img/ bg.png") no-repeat center center/100% 100%;
        }
        a{
            text-decoration: none;
            color: inherit;
        }
        .header{
            height: 70px;
            background: rgba(0,0,0,0.5);
            line-height: 70px;
            display: flex;
            justify-content: space-between;
            color: #fff;
        }

        .header span,.header a,.header img{
            display: inline-block;
            vertical-align: middle;
        }

        .header a{
            padding: 0 16px;
        }
        .header a:hover{
            color: gold;
        }
        .header img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #0a8cd2;
        }

        .right{
            padding-right: 20px;
        }

        .logo{
            height: 164px;
            /*background: #f0cdb9;*/
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        .logo img{
            width: 203px;
        }
/* 写样式搜索 */
        .search{
            height: 77px;
            /* background: #0AA5E2; */
            line-height: 77px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }
        #textcontent{
            width: 630px;
            height: 52px;
        }
        #clicButton{
            width: 124px;
            height: 58px;  
            color: white;
            font-size: 23px;
            background-color:#2196F3;
            border:0;
        }
        .content{
            
            width: 1256px;
            height: 414px;
            line-height: 414px;
            background: #fff;
            opacity: 0.85;
            margin: 123px auto 0;
            border-radius: 20px;
            display: flex;
            justify-content:space-around;
            align-items: center;
        }
        .pdtent{
            width: 831px;
            height: 357px;
            opacity: 1;
        }
        .swiper-container{
            width: 831px;
            height: 357px;
            border-radius: 5px;
            /* background: chartreuse; */
            text-align: center;
            overflow: hidden;
        }
        .swiper-container img{
            width: 100%;
            height: 100%;
        }
        .box{
            width:300px;
            height: 300px;
            opacity: 1;
            font-size: 12px;
            font-weight: bold;
            text-align: left;
          
        }
        .item{
            height: 50px;
            line-height:50px;
        }
        .item:hover{
            background-color: #ccc;
            color: red;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="left">
            <a href="#">新闻</a>
            <a href="#">官网</a>
            <a href="#">地图</a>
            <a href="#">直播</a>
            <a href="#">视频</a>
            <a href="#">贴吧</a>
            <a href="#">学术</a>
            <a href="#">更多</a>
        </div>
    
        <div class="right">
            <span>设置</span>
            <img src="./img/header.png">
            <span>Blanche</span>
        </div>
    </div>
    
    
    <div class="logo">
        <img src="./img/%20logo.png">
    </div>
    <!--在这一行下面写html-->
    <div class="search">
        <input type="text" value="" id="textcontent">
        <button type="button" id="clicButton">搜索</button>
    </div>
    
    <div class="content">
        <div class="pdtent">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./img/banner.png">
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/img01.png">
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/img02.png">
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/img03.png">
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/img04.png">
                    </div>
                </div>
            </div>

        </div>
        <div class="box">
           <div class="item"><span style="font-size: 20px;color:#FFEB3B;">1</span> 31省区市新增确诊20例 本土6例488万</div>
           <div class="item"><span style="font-size: 18px;color:#FFC107;;">2</span> 中国成功实施反导拦截技术试验热471万</div>
           <div class="item"><span style="font-size: 15px;color:#FF9800;">3</span> CGTN:坚决反对英国吊销其落地许可455万</div>
           <div class="item"><span style="font-weight:blod;">4</span> 东部战区回应美军舰穿航台湾海峡439万</div>
           <div class="item"><span style="font-weight:blod">5</span> 拜登发表上任后首份外交政策演讲423万</div>
           <div class="item"><span style="font-weight:blod;">6</span> 圭亚那终止与台湾设立办公室协议394万</div>
        </div>
    </div>
<!--
    作业要求：搜索首页
    备注：打开下面链接可以获取到设计稿相关数据，根据数据来实现整个页面
    https://app.mockplus.cn/s/Ar7a65Lxuu4
 -->
 <script src="./js/swiper.min.js"></script>
 <script>
     
     var mySwiper = new Swiper ('.swiper-container', {
            loop: true, 
            autoplay: 1000,
            initialSlide: 0, //图片第几张开始
            autoplayDisableOnInteraction: false, //一秒
        })
     window.onload=function(){
         var btn=document.getElementById('clicButton');
         var t=document.getElementById("textcontent");
        
       var time=  btn.onclick=function(){
              console.log(t.value)
              if(t.value != ''){
                 
                  window.open('https://cn.bing.com/search?q='+t.value);
              }else{
                alert('输入不能为空')
              }
          }

     }
 </script>
</body>

</html>